<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .clearfix:after { /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        body {
            margin: 0;
            padding: 0;

        }

        .container {
            min-width: 1000px;
            margin: 0 auto;
        }

        .nav {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            width: 100%;
            height: 60px;
            background: url("public/nav-bg.png") 50% 0px;
            z-index: 10001;
        }

        .nav-inner {
            width: 1000px;
            margin: 0 auto;
        }

        .logo {
            float: left;
            margin-top: 10px;
            margin-left: 10px;
            width: 199px;
            height: 34px;
            background: url("public/logo.png") no-repeat 0 50%;
        }

        .floor {
            position: relative;
            height: 800px;
            overflow: hidden;
            color: #737373;
        }

        .floor.floor1 {
            height: 700px;
            overflow: hidden;
            background: -webkit-linear-gradient(top, #e9f7ef, #fafcfb);
        }

        .screen {
            position: absolute;
            width: 297px;
            height: 167px;
            left: 50%;
            top: 0;
            margin-left: -860px;
            background: url("public/screen.png") no-repeat 0 0;
            animation: slideDownL .6s forwards ease-in-out;
        }

        .floor1 .product {
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -640px;
        }

        .floor1 .title {
            position: absolute;
            top: 254px;
            left: 50%;
            width: 566px;
            height: 86px;
        }

        .floor1 .circle {
            width: 628px;
            height: 549px;
            left: 50%;
            top: 0;
            margin-left: 204px;
            z-index: 0;
            animation: slideDownL .6s forwards ease-in-out;
            background: url("public/circle.png") no-repeat 0 0;
        }

        .piece {
            position: absolute;
            z-index: 0;
        }

        .download-btn {
            position: absolute;
            background: url("public/download-btn.png") no-repeat -72px -23px;
            width: 245px;
            height: 70px;
            left: 50%;
            top: 414px;
            margin-left: 122.5px;
        }

        .download-btn:hover {
            background-position: -72px -118px;
        }

        .download-btn:active {
            background-position: -72px -212px;
        }

        .brush {
            width: 253px;
            height: 237px;
            left: 50%;
            bottom: -167px;
            margin-left: 320px;
            animation: slideUpL .6s forwards ease-in-out;
            background: url("public/brush.png") no-repeat 0 0;
        }

        @-webkit-keyframes slideDownL {
            0% {
                -webkit-transform: translateY(-30px);
                transform: translateY(-30px)
            }
            100% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
        }

        @-webkit-keyframes slideUpL {
            0% {
                -webkit-transform: translateY(30px);
                transform: translateY(30px)
            }
            100% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
        }


        .floor2 .bg {
            width: 100%;
            height: 100%;
            background: url("public/floor2-bg.png") 50% 0;
        }

        .item {
            position: absolute;
        }

        .item-1 {
            right: 50%;
            top: 237px;
            margin-right: 201px;
            width: 273px;
            height: 164px;
            background: url("public/browser.png") no-repeat 0 0;
        }

        .item-2 {
            right: 50%;
            top: 560px;
            margin-right: 70px;
            width: 322px;
            height: 106px;
            background: url("public/muma.png") no-repeat 0 0;
        }

        .item-3 {
            left: 50%;
            top: 138px;
            margin-left: 116px;
            width: 382px;
            height: 136px;
            background: url("public/transfer.png") no-repeat 0 0;
        }

        .item-4 {
            left: 50%;
            top: 480px;
            margin-left: 130px;
            width: 347px;
            height: 117px;
            background: url("public/download.png") no-repeat 0 0;
        }

        .item p {
            font-size: 13px;
            line-height: 20px;
            olor: #909693;
        }

        .item-1 p {
            padding: 130px 0 0 24px;
        }

        .item-2 p {
            padding: 48px 0 0 112px;
        }

        .item-3 p {
            padding: 102px 0 0 171px;
        }

        .item-4 p {
            padding: 50px 0 0 108px;
        }

        .floor2 .title {
            position: absolute;
            top: 322px;
            left: 50%;
            margin-left: -109px;
            width: 218px;
            height: 105px;
            background: url("public/floor2-title.png") 0 0;
        }

        .floor2.in .item-1 {
            animation: show1 2s forwards;
        }

        .floor2.in .item-2 {
            animation: show3 2s forwards;
        }

        .floor2.in .item-3 {
            animation: show2 2s forwards;
        }

        .floor2.in .item-4 {
            animation: show4 2s forwards;
        }

        .floor2 .title {
            animation: showTitle 1s forwards;
        }


        @keyframes show1 {
            0% {
                opacity: 0;
                transform: translateY(50px);
            }
            15% {
                opacity: 0;
                transform: translateY(50px);
            }
            30% {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
        }

        @keyframes show2 {
            0% {
                opacity: 0;
                transform: translateY(50px);
            }
            25% {
                opacity: 0;
                transform: translateY(50px);
            }
            40% {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
        }

        @keyframes show3 {
            0% {
                opacity: 0;
                transform: translateY(50px);
            }
            35% {
                opacity: 0;
                transform: translateY(50px);
            }
            55% {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
        }

        @keyframes show4 {
            0% {
                opacity: 0;
                transform: translateY(50px);
            }
            35% {
                opacity: 0;
                transform: translateY(50px);
            }
            75% {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
        }

        @keyframes showTitle {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            20% {
                opacity: 1;
                transform: scale(1);
            }
        }

        .floor * {
            opacity: 0;
        }

        .floor.in *, .floor.floor1 * {
            opacity: 1
        }

        .floor3 {
            background-color: #f1faf4;
        }


        .floor3 .text {
            background: url("public/floor3-text.png") no-repeat 10px 0;
            position: absolute;
            top: 164px;
            right: 50%;
            margin-right: 44px;
            width: 450px;
            height: 462px;
        }

        .floor3 .list {
            padding: 106px 0 0 62px;
        }

        .floor3.in .text {
            animation: text 1s forwards
        }

        @keyframes text {
            0% {
                opacity: 0;
                -webkit-transform: translateY(100px);
                transform: translateY(100px)
            }
            30% {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
        }


        .floor3 .list-item {
            padding-bottom: 30px;
        }

        .floor3 .list-item h2 {
            font-size: 18px;
            padding: 0;
            margin: 0;
        }

        .floor3 .list-item p {
            padding: 0;
            margin: 0;
            font-size: 13px;
            line-height: 24px;
        }

        .floor3 .fig {
            position: absolute;
            top: 117px;
            left: 50%;
            margin-left: 29px;
        }

        .floor3.in .fig {
            animation: fig 2s forwards ease;
        }

        .floor3.in .shadow {
            animation: shadow 2s forwards ease
        }

        @keyframes fig {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(20px, 20px, 0);
                transform: translate3d(20px, 20px, 0)
            }
            30% {
                opacity: 0;
                -webkit-transform: translate3d(20px, 20px, 0);
                transform: translate3d(20px, 20px, 0)
            }
            60% {
                opacity: 1;
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
        }

        @keyframes shadow {
            0% {
                -webkit-transform: translate3d(-86px, -20px, 0);
                transform: translate3d(-86px, -20px, 0)
            }
            40% {
                -webkit-transform: translate3d(-86px, -20px, 0);
                transform: translate3d(-86px, -20px, 0)
            }
            70% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
        }

        .floor .fig-inner {
            position: relative;
            width: 458px;
            height: 558px;
        }

        .fig-inner .shadow {
            position: absolute;
            top: 86px;
            right: -5px;
            width: 332px;
            height: 482px;
            background: url("public/shadow.png");
        }

        .fig-inner .laptop {
            position: absolute;
            top: 0;
            left: 0;
            width: 458px;
            height: 558px;
            background: url("public/laptop.png");
        }


        .floor4 .lock {
            position: absolute;
            right: 50%;
            top: 157px;
            width: 470px;
            height: 398px;
        }

        .floor4.in .lock {
            animation: lockshield 2s forwards ease;
        }

        @keyframes lockshield {
            0% {
                opacity: 0
            }
            30% {
                opacity: 0
            }
            60% {
                opacity: 1
            }
        }

        .lock .lock-inner {
            position: relative;
            height: 100%;
            width: 100%;
            overflow: hidden;
            background: url("public/lock.png") no-repeat 50% 0;
        }

        .floor4 .left-paper {
            position: absolute;
            top: 119px;
            right: 50%;
            width: 86px;
            height: 95px;
            background: url("public/paper-left.png") no-repeat 0 0;
        }

        .floor4.in .left-paper {
            animation: leftpaper 2s forwards ease;
        }

        .floor4.in .right-paper {
            animation: rightpaper 2s forwards ease;
        }

        @keyframes leftpaper {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(10px, 50px, 0) rotateZ(23deg);
                transform: translate3d(10px, 50px, 0) rotateZ(23deg)
            }
            30% {
                opacity: 1;
                -webkit-transform: translate3d(10px, 50px, 0) rotateZ(23deg);
                transform: translate3d(10px, 50px, 0) rotateZ(23deg)
            }
            50% {
                -webkit-transform: translate3d(0, 0, 0) rotateZ(0);
                transform: translate3d(0, 0, 0) rotateZ(0)
            }
        }

        @keyframes rightpaper {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(-10px, 50px, 0) rotateZ(-15deg);
                transform: translate3d(-10px, 50px, 0) rotateZ(-15deg)
            }
            40% {
                opacity: 1;
                -webkit-transform: translate3d(-10px, 50px, 0) rotateZ(-15deg);
                transform: translate3d(-10px, 50px, 0) rotateZ(-15deg)
            }
            70% {
                -webkit-transform: translate3d(0, 0, 0) rotateZ(0);
                transform: translate3d(0, 0, 0) rotateZ(0)
            }
        }

        .lock-inner .right-paper {
            position: absolute;
            top: 128px;
            left: 50%;
            margin-left: -15px;
            width: 96px;
            height: 89px;
            background: url("public/paper-right.png") no-repeat 0 0;
        }

        .lock-inner .lock-shield {
            position: absolute;
            top: 160px;
            left: 50%;
            margin-left: -95px;
            width: 190px;
            height: 220px;
            background: url("public/lock-shield.png") no-repeat 0 0;
        }

        .floor4 .text {
            position: absolute;
            top: 210px;
            left: 50%;
            margin-left: 79px;
            width: 375px;
            height: 348px;
            background: url("public/floor4-text.png") no-repeat 0 0;
        }

        .floor4.in .text {
            animation: text 1s forwards;
        }

        .floor4 .content {
            padding: 140px 0 0 5px;
        }

        .floor4 .content h1 {
            font-size: 20px;
        }

        .floor4 .content p {
            width: 355px;
            padding-top: 38px;
            font-size: 13px;
            line-height: 24px;
            text-align: justify;
            color: #909693;
        }


        .floor5.in .viewport {
            animation: simpleFig 2s forwards ease;
        }

        @keyframes simpleFig {
            0% {
                opacity: 0;
                transform: translate3d(0px, 20px, 0)
            }
            20% {
                opacity: 0;
                transform: translate3d(0px, 20px, 0)
            }
            100% {
                opacity: 1;
                transform: translate3d(0, 0, 0)
            }
        }

        .viewport.top {
            background: url("public/top-tab.png") no-repeat 0 0;
        }

        .viewport.bottom {
            background: url("public/bottom-tab.png") no-repeat 0 0;
        }

        .viewport {
            position: absolute;
            right: 50%;
            top: 100px;
            margin-right: -150px;
            width: 658px;
            height: 533px;
            transition: all .5s linear;
        }

        .floor5 .text {
            position: absolute;
            top: 223px;
            left: 50%;
            margin-left: 213px;
            width: 228px;
            height: 295px;
            background: url("public/floor6-text.png");
        }

        .floor5 .list {
            padding: 122px 0 0 13px;
        }

        .floor5 .text p, .floor6 .text p {
            padding: 0;
            margin: 0;
            font-size: 14px;
            margin-bottom: 5px;
            padding-left: 20px;
            margin-left: -20px;
            background: url("public/point.png") no-repeat 9px 50%;
        }

        .view-btn {
            display: block;
            position: absolute;
            width: 35px;
            height: 46px;
            cursor: pointer;
            background: url("public/viewport-btn.png") no-repeat;
        }

        .view-btn {
            animation: text 1s forwards;
        }

        .view-btn-top {
            top: 504px;
            left: 50%;
            margin-left: 321px;
        }

        .view-btn-bottom {
            top: 504px;
            left: 50%;
            margin-left: 380px;
            background-position: -59px 0;
        }

        .view-btn-top.current {
            background-position: 0 -63px
        }

        .view-btn-bottom.current {
            background-position: -59px -63px;
        }

        .floor6 {
            height: 864px;
            background-color: #fafafa;
        }


        .floor6 .text {
            position: absolute;
            top: 206px;
            right: 50%;
            margin-right: 203px;
            width: 268px;
            height: 256px;
            background: url("public/floor7-text.png") no-repeat 0 0;
        }

        .floor6 .content {
            padding: 135px 0 0 13px;
        }

        .floor6 .sub-title h2 {
            margin: 0;
            padding: 0;
            padding-left: 23px;
            font-size: 20px;
        }

        .floor6 .list {
            padding-top: 33px;
        }

        .floor6 .list p {
            font-size: 14px;
            margin-bottom: 4px;
        }

        .floor6 .fig {
            position: absolute;
            top: 135px;
            left: 50%;
            margin-left: -118px;
            width: 596px;
            height: 471px;
            background: url("public/floor7-fig.png") no-repeat 0 0;
        }


        .floor6.in .fig {
            animation: simpleFig 2s forwards ease
        }

        .floor6.in .text {
            animation: text 1s forwards;
        }

        .floor6 .download-btn {
            top: 711px;
            margin-left: -122.5px;
        }

        .floor6 .window10 {
            top: 785px;
            width: 100%;
            font-size: 12px;
            color: #b5bab8;
            text-align: center;
            position: absolute;
        }

        #copyright {
            color: #999;
            line-height: 2;
            padding: 40px 0;
            text-align: center;
            font-size: 12px;
        }

        p {
            margin: 0;
            padding: 0;
        }

        a {
            color: #999;
            text-decoration: none;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="nav">
        <div class="nav-inner clearfix">
            <a href="" class="logo"></a>
        </div>
    </div>
    <div class="floor floor1">
        <div class="piece screen"></div>
        <div class="piece shield"></div>
        <div class="piece brush"></div>
        <div class="piece circle"></div>
        <img src="public/jiemian.png" alt="" class="product">
        <img src="public/title.png" alt="" class="title">
        <a href="" class="btn download-btn"></a>
    </div>

    <div class="floor floor2">
        <div class="bg">

        </div>
        <div class="item item-1">
            <p>自动拦截网页中欺诈信息，定期清理cookies，保护上网安全及隐私安全</p>
        </div>
        <div class="item item-2">
            <p>实时拦截恶意程序，盗号木马，提升防御能力，保护您的系统安全</p>
        </div>
        <div class="item item-3">
            <p>监测传输文件安全性，网址安全性欺诈号码，确保文件及上网安全</p>
        </div>
        <div class="item item-4">
            <p>下载到风险文件和未知文件时，<br>
                提示在沙箱中运行，极大减少文件风险
            </p>
        </div>
        <div class="title"></div>

    </div>
    <div class="floor floor3">
        <div class="text">
            <div class="list">
                <div class="list-item  list-item1">
                    <h2>360云查杀引擎</h2>
                    <p>扫描速度比传统杀毒引擎快10倍以上，不需要频繁升级木马库</p>
                </div>
                <div class="list-item  list-item2">
                    <h2>360启发式引擎</h2>
                    <p>自动化地区分正常程序与非正常程序，快速定位感染病毒的文件</p>
                </div>
                <div class="list-item  list-item3">
                    <h2>QEX脚本查杀引擎</h2>
                    <p>快速识别恶意脚本，强力清除Office宏病毒、CAD病毒等脚本病毒</p>
                </div>
                <div class="list-item  list-item4">
                    <h2>QVM人工智能引擎</h2>
                    <p>基于支持向量机技术的杀毒引擎，断网也能防御大部分病毒</p>
                </div>
                <div class="list-item  list-item5">
                    <h2>小红伞本地引擎</h2>
                    <p>采用高效的启发式扫描，准确检测和清除病毒数超160多万种</p>
                </div>
            </div>
        </div>
        <div class="fig">
            <div class="fig-inner">
                <div class="shadow">

                </div>
                <div class="laptop"></div>
            </div>

        </div>
    </div>
    <div class="floor floor4">
        <div class="lock">
            <div class="lock-inner">
                <div class="left-paper"></div>
                <div class="right-paper"></div>
                <div class="lock-shield"></div>
            </div>

        </div>
        <div class="text">
            <div class="content">
                <h1>360国内独家首发反勒索服务，支付金额最高达3个比特币</h1>
                <p>
                    某些木马病毒可能会将您的数据文件（如文档、图片等）经过加密隐藏起来，然后向您索取钱财。如果没在期限内付款，文档和图片将会永久丢失。目前，360安全卫士首家防御此类木马病毒，如果不幸遭遇此类木马，360将帮您支付比特币，并全力恢复加密文档！</p>
            </div>
        </div>
    </div>
    <div class="floor floor5">
        <div class="viewport top"></div>
        <div class="text">
            <div class="list">
                <p>扁平化界面清新上线</p>
                <p>交互层级优化提升使用体验</p>
                <p>导航切换贴心更自由</p>
                <p>兼容平板电脑，触控更便捷</p>
            </div>

        </div>
        <span class="view-btn view-btn-top current"></span>
        <span class="view-btn view-btn-bottom"></span>
    </div>
    <div class="floor floor6">
        <div class="text">
            <div class="content">
                <div class="sub-title">
                    <h2>无游戏 不人生</h2>
                </div>
                <div class="list">
                    <p>热门游戏 一网打尽</p>
                    <p>游戏热点 一目了然</p>
                    <p>畅玩游戏 一键置顶</p>
                </div>
            </div>
        </div>
        <div class="fig"></div>
        <a class="download-btn"></a>
        <p class="window10">全面兼容Win10、及Win8、Win7、XP等操作系统</p>
    </div>
    <div id="copyright">
        <p>Copyright XXXX-XXXX XXX.XXX 版权所有 XXX互联网安全中心</p>
        <p>
            <a href="">京ICP证XXXXXXX号[京ICP备XXXXXXXX号-X]</a>
            <a href=""> 文网文[XXX]XXX号</a>
            <a href=""> 新出网证（京）字XXX号</a>
            <a href="">工商营业执照</a>
        </p>
        <p>
            <a href="">
                <img src="public/t01d8eda6e551cf2615.png" alt="">
                京公网安备 XXXXXXXX号
            </a>
        </p>
        <p>
            <a href="">座机：XXX-XXXXXXXX 地址：XXXXXXXXXXXXXX</a>
        </p>

    </div>

    <script src="js/jquery-1.12.1.min.js"></script>
    <script>

        $(document).ready(function () {
            $(window).scroll(function () {
                f('floor2');
                f('floor3');
                f('floor4');
                f('floor5');
                f('floor6');
            })


            function f(elementClassName) {
                var winHeight = $(window).height();         //获取当前窗口的高度（基本不变）
                var winScrollHeight = $(window).scrollTop();        //页面滚动的距离（变化）
                var floor2iOffsetTop = $('.' + elementClassName).offset().top;   //元素距离顶部的距离（不变）
                var floor2height = $('.' + elementClassName).height();       //元素自身高度（不变）

                if (winScrollHeight < floor2iOffsetTop + floor2height && winScrollHeight > floor2iOffsetTop - winHeight + floor2height / 2) {
                    if ($('.' + elementClassName).hasClass('in') == false) {
                        $("." + elementClassName).addClass("in");
                    }
                }
            }


            var timer = null;
            switchFig();

            function switchFig() {
                timer = setTimeout(function () {
                    $(".view-btn:not(.current)").trigger("click")
                }, 3000)
            };

            $('.view-btn').mouseover(function () {
                if ($(this).hasClass('current')) return;
                $('.view-btn:not(.current)').trigger('click');
                clearInterval(timer);
                timer = null;
            }).mouseleave(function () {
                switchFig();
            });


            $('.view-btn').on('click', function () {
                if ($(this).hasClass('current')) return;
                $(this).hasClass("view-btn-top") ? $(".viewport").removeClass("bottom").addClass("top") : $(".viewport").removeClass("top").addClass("bottom"), $(this).addClass("current").siblings(".view-btn").removeClass("current")
                clearTimeout(timer);
                timer = null;
                switchFig();
                $(this).trigger("click");
            })
        })
    </script>
</div>
</body>
</html>